<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
		<title>日志</title>
	</head>
	<style type="text/css">
		body,
		.container,
		.mould_daliy {
			margin: 0;
			padding: 0;
		}
		.container {
			position: relative;
			background: #e9e9e9;
			padding-bottom: 200px;
		}
		.container .bg_pgoto {
			width: 100%;
			height: 618px;
			z-index: -1;
		}
		.daily_content {
			width: 1000px;
			height: 600px;
			position: relative;
			margin-left: 18%;
			margin-top: -520px;
			background: #FFFFFF;
			border-radius: 5px;
			border: 1px solid #FFFFFF;
		}
		.daliy_header {
			width: 94%;
			height: 34px;
			margin-left: 3%;
			color: #2670AF;
			border-bottom: 2px solid #DDDDDD;
		}
		button {
			cursor: pointer;
		}
		#esc {
			float: right;
			margin-right: 3%;
			margin-top: -33px;
			width: 80px;
			height: 28px;
			color: #fff;
			cursor: pointer;
			border-radius: 3px;
			border: 1px solid #ddd;
		}
		.daily_style {
			width: 50%;
			height: 50px;
			cursor: pointer;
		}
		.write_daily {
			width: 120px;
			height: 40px;
			margin-top: 10px;
			margin-left: 5%;
			float: left;
			color: #FFFFFF;
			text-align: center;
			background: #7B8C9E;
			border-radius: 5px;
			border: 1px solid #7B8C91;
		}
		.write_daily:hover {
			background: #697A8B;
		}
		.write_daily .img {
			width: 22px;
			height: 22px;
			margin-top: 10px;
			margin-left: 10px;
			overflow: hidden;
			border-radius: 3px;
			background: #FFFFFF;
		}
		.write_daily .img img {
			margin-left: -105px;
			margin-top: -3px
		}
		.write_daily .img .mould_bg {
			margin-left: -0.5px;
			margin-top: -6px;
		}
		.write_daily p {
			margin-top: -23px;
			margin-left: 17px;
		}
		.history_daily {
			width: 95%;
			margin-top: 20px;
			margin-left: 2%;
		}
		.history_daily_dsc {
			width: 100%;
			height: 30px;
			padding-top: 8px;
			border-bottom: 1px dashed #DDDDDD;
		}
		/*模板日志*/
		
		#mould_daliy,.mould_daliy {
			width: 1000px;
			position: relative;
			margin-left: 18%;
			margin-top: -520px;
			background: #FFFFFF;
			border-radius: 8px;
			overflow: hidden;
			display: none;
		}
		.cmould_daily_header {
			width: 100%;
			height: 36px;
			padding-top: 10px;
			padding-left: 30px;
			font-size: 18px;
			background: #F2F2F2;
		}
		.cmould_daily_content {
			width: 96%;
			margin-left: 2%;
			margin-top: 20px;
			position: relative;
			background: #F1F4F4;
			border: 1px solid #DDDDDD;
		}
		.image1,
		.image2 {
			margin: 0px;
			padding: 0px;
			width: 100%;
			z-index: -10;
		}
		.image1 img,
		.image2 img {
			width: 100%;
			z-index: -1;
		}
		.image2 img {
			margin-top: -5px;
		}
		.image3 {
			width: 214px;
			height: 273px;
			position: relative;
			margin-top: -145px;
			margin-left: 112px;
			padding-top: 7px;
			text-align: center;
			background: #FFFFFF;
			border: 1px solid #E9EBEB;
		}
		.image3 img {
			width: 201px;
			height: 267px;
		}
		.write_say1 {
			width: 544px;
			position: relative;
			margin-top: -273px;
			margin-left: 370px;
		}
		.write_say1 .quotation_left1 {
			position: absolute;
			margin-top: 66px;
			margin-left: 19px;
		}
		.write_say1 .quotation_right1 {
			position: absolute;
			margin-top: 95px;
			margin-left: 500px;
		}
		#write_say_content1 {
			width: 412px;
			margin-left: 69px;
		}
		#write_say_content1 #title {
			width: 100%;
			height: 50px;
			padding-top: 5px;
			padding-left: 3px;
			font-size: 28px;
			outline: none;
			overflow: hidden;
		}
		#write_say_content1 #dsc1 {
			width: 100%;
			text-indent: 5px;
			margin-top: 15px;
			outline: none;
			color: #4c4c4c;
			padding-left: 5px;
		}
		#write_say_content1 #personal_perception1 {
			width: 98%;
			min-height: 152px;
			margin-top: 26px;
			outline: none;
			padding-left: 6px;
			padding-top: 10px;
			text-indent: 18px;
			border: 1px dashed #a8a8a8;
		}
		#personal_perception1 label,
		#personal_perception2 label,
		#personal_perception3 label {
			position: relative;
			color: #ccbcb2;
		}
		#personal_perception1 #false_write {
			width: 100%;
		}
		.write_say2 {
			width: 480px;
			position: relative;
			margin-top: 0px;
			margin-left: 48px;
		}
		.write_say2 .quotation_left2 {
			position: absolute;
			margin-top: 2px;
			margin-left: 13px;
		}
		.write_say2 .quotation_right2 {
			position: absolute;
			margin-top: 46px;
			margin-left: 435px;
		}
		#write_say_content2 {
			width: 369px;
			margin-left: 60px;
		}
		#write_say_content2 #dsc2 {
			width: 99%;
			margin-top: 10px;
			outline: none;
			color: #4c4c4c;
			padding-left: 5px;
			padding-top: 5px;
		}
		#write_say_content2 #personal_perception2 {
			width: 98%;
			margin-top: 26px;
			min-height: 152px;
			outline: none;
			padding-left: 6px;
			padding-top: 10px;
			text-indent: 18px;
			border: 1px dashed #a8a8a8;
		}
		#false_write2 {
			width: 100%;
		}
		.image4 {
			width: 300px;
			height: 180px;
			position: absolute;
			margin-top: 8px;
			margin-left: 551px;
			padding-top: 5px;
			float: left;
			text-align: center;
			background: #FFFFFF;
			border: 1px solid #E9EBEB;
		}
		.image4 img {
			width: 290px;
			height: 175px;
		}
		.image5 {
			width: 362px;
			height: 200px;
			position: relative;
			margin-top: 40px;
			margin-left: 108px;
			padding-top: 5px;
			text-align: center;
			background: #FFFFFF;
			border: 1px solid #E9EBEB;
		}
		.image6 {
			width: 362px;
			height: 200px;
			position: relative;
			margin-top: -205px;
			margin-left: 490px;
			padding-top: 5px;
			text-align: center;
			text-align: center;
			background: #FFFFFF;
			border: 1px solid #E9EBEB;
		}
		.image5 img,
		.image6 img {
			width: 352px;
			height: 195px;
		}
		#personal_perception3 {
			width: 735px;
			min-height: 267px;
			margin-top: 35px;
			margin-left: 108px;
			outline: none;
			padding-left: 6px;
			padding-top: 10px;
			text-indent: 18px;
			border: 1px dashed #a8a8a8;
		}
		#false_write3 {
			width: 735px;
		}
		.image7 {
			position: relative;
			width: 100%;
			height: 100px;
			margin-top: 50px;
			overflow: hidden;
		}
		.image7 .last_img {
			position: absolute;
			margin-top: 0px;
			margin-left: 0px;
		}
		.mould_daily_footer {
			width: 96%;
			margin-left: 2%;
			padding-top: 20px;
			padding-bottom: 30px;
			position: relative;
		}
		/*普通日志*/
		
		.edit_daliy,.general_daliy {
			width: 1000px;
			position: relative;
			margin-left: 18%;
			margin-top: -520px;
			background: #FFFFFF;
			border-radius: 8px;
			overflow: hidden;
			border: 1px solid #DDDDDD;
			display: none;
		}
		.general_daliy_content {
			width: 97%;
			position: relative;
			margin-left: 1.5%;
			border: 1px solid #DDDDDD;
		}
		.general_daliy_content .conetn_daliy_top {
			width: 100%;
			height: 50px;
			margin-top: 20px;
			border: 1px dashed #a8a8a8;
		}
		.letter_paper {
			list-style: none;
		}
		.letter_paper li {
			width: 42px;
			height: 29px;
			float: left;
			margin-top: -5px;
			border-radius: 5px;
			overflow: hidden;
			border: 1px solid #000000;
		}
		.letter_paper li img {
			cursor: pointer;
			width: 42px;
			height: 29px;
		}
		.general_daliy_content .conetn_daliy_center {
			width: 100%;
			min-height: 500px;
			background: #faeddd;
		}
		.general_daliy_content.conetn_daliy_center .bg img {
			width: 100%;
			z-index: -10;
		}
		.general_daliy_content .general_title ,.general_daliy_content .edit_general_title{
			width: 80%;
			height: 45px;
			margin-left: 10%;
			font-size: 26px;
			padding-top: 10px;
			text-align: center;
			outline: none;
			border: 1px dashed #a8a8a8;
		}
		.general_title:hover ,.edit_general_title:hover{
			border: 3px solid #ffc600;
		}
		.general_daliy_content .general_content ,.general_daliy_content .edit_general_content{
			width: 94%;
			margin-left: 3%;
			margin-top: 40px;
			padding-top: 10px;
			text-indent: 22px;
			outline: none;
			border-top: 1px dashed #a8a8a8;
		}
		.history_daily_style {
			list-style: none;
			margin-top: -9px;
		}
		.history_daily_style li {
			float: right;
			position: relative;
			cursor: pointer;
			font-size: 14px;
			color: #c0c0c0;
		}
		.history_daily_style li:hover {
			text-decoration: underline;
			color: #000000;
		}
	</style>

	<body>
		<div class="container">
			<img class="bg_pgoto" src="img/daily_photo/d15.png" />
			<!--
            	描述：日志主页面
            -->
			<div class="daily_content">
				<div class="daliy_header">
					<h4>我的日志</h4></div>
				<button id="esc">返回</button>
				<div class="daily_style">
					<div class="write_daily">
						<div class="img">
							<img src="img/daily_photo/d13.png" />
						</div>
						<p>写日志</p>
					</div>
					<div class="write_daily write_mould_daily">
						<div class="img">
							<img class="mould_bg" src="img/daily_photo/d13.png" />
						</div>
						<p>模板日志</p>
					</div>
				</div>
				<div class="history_daily">

				</div>
			</div>
			<!--
            	描述：普通日志
            -->
			<div class="general_daliy">
				<div class="cmould_daily_header general_daily_header">
					<label>写日志</label>
				</div>
				<div class="general_daliy_content">
					<div class="conetn_daliy_top">
						<ul class="letter_paper">
							<li style="margin-left: -30px;font-size:14px;padding-top: 5px;border:none;">信纸：</li>
							<li><img src="img/daily_photo/g12.gif" /></li>

						</ul>
					</div>
					<div class="conetn_daliy_center">
						<div class="bg"><img style="width:100%;" src="img/daily_photo/g2.jpg" /></div>
						<div class="general_title" contenteditable="true">
							请在这里输入日志标题
						</div>
						<div class="general_content" contenteditable="true"></div>
					</div>
					<div class="conetn_daliy_bottom"></div>
				</div>
				<div class="mould_daily_footer">
					<button class="report" style="background:#5caae6;color:#FFFFFF;width:85px;height:25px;border:1px solid #5caae6;border-radius:2px;">发表</button>
					<button class="esc" style="color:#878773;height:25px;width:55px;">取消</button>
					<button style="float:right;color:#878773;width:85px;height:25px;">保存草稿</button>
				</div>
			</div>

			<!--
            	描述：模板日志
            -->
			<div class="mould_daliy">
				<div class="cmould_daily_header">
					<label>写日志</label>
				</div>
				<div class="cmould_daily_content">
					<div class="image1">
						<img src="img/daily_photo/d1.jpg" />
					</div>
					<div class="image2">
						<img src="img/daily_photo/d2.jpg" />
					</div>
					<div class="image3">
						<img src="img/daily_photo/d5.jpg" />
					</div>
					<div class="write_say1">
						<img class="quotation_left1" src="img/daily_photo/d3.png" />
						<img class="quotation_right1" src="img/daily_photo/d4.png" />
						<div id="write_say_content1">
							<div id="title" contenteditable="true">致我们终将逝去的青春</div>
							<div id="dsc1" contenteditable="true">“人生本来就有很多事是徒劳无功的。”就像青春，虽然徒劳，却在人的心里住得最久，挥之不去，怀念那段青涩年华，怀念它的...</div>
							<div id="personal_perception1" contenteditable="true">
								<label>那些曾经美好的回忆，他写的情书，相视而笑的样子，你还记着么？一起来重拾那曾经的美好...</label>
								<div id="false_write1"></div>

							</div>
						</div>

					</div>
					<div class="image4">
						<img src="img/daily_photo/d6.jpg" />
					</div>
					<div class="write_say2">
						<img class="quotation_left2" src="img/daily_photo/d3.png" />
						<img class="quotation_right2" src="img/daily_photo/d4.png" />
						<div id="write_say_content2">
							<div id="dsc2" contenteditable="true">长长的喜欢，没有理由的自信，青春里小小的秘密，爱情明明触手可及，但又在莫名中失去，如果时光倒流，你最想...</div>
							<div id="personal_perception2" contenteditable="true">
								<label>牵着他的手，走在城市的街头，就这样满足小小的我</label>
								<div id="false_write2"></div>
							</div>
						</div>
					</div>

					<div class="image5">
						<img src="img/daily_photo/d7.jpg" />
					</div>
					<div class="image6">
						<img src="img/daily_photo/d8.jpg" />
					</div>
					<div id="personal_perception3" contenteditable="true">
						<label>一起翘课，一起吃饭，一起打球，一起看电影，美好的回忆我只想在这里写下纪念我怀念的——那些年</label>
						<div id="false_write3"></div>
					</div>
					<div class="image7">
						<img src="img/daily_photo/d9.png" />
						<img src="img/daily_photo/d9.png" />
						<img src="img/daily_photo/d9.png" />
						<img src="img/daily_photo/d9.png" />
						<img src="img/daily_photo/d9.png" />
						<img src="img/daily_photo/d9.png" />
						<img src="img/daily_photo/d9.png" />
						<img src="img/daily_photo/d9.png" />
						<img class="last_img" src="img/daily_photo/d9.png" />
					</div>

				</div>
				<div class="mould_daily_footer">
					<button class="mould_report" style="background:#5caae6;color:#FFFFFF;width:85px;height:25px;border:1px solid #5caae6;border-radius:2px;">发表</button>
					<button class="esc" style="color:#878773;height:25px;width:55px;">取消</button>
					<button style="float:right;color:#878773;width:85px;height:25px;">保存草稿</button>
				</div>
			</div>
			
			<!--
            	作者：812474076@qq.com
            	时间：2017-01-02
            	描述：
            -->
			<div class="edit_daliy">
				<div class="cmould_daily_header general_daily_header">
					<label>写日志</label>
				</div>
				<div class="general_daliy_content">
					<div class="conetn_daliy_center">
						<div class="bg"><img style="width:100%;" src="img/daily_photo/g2.jpg" /></div>
						<div class="edit_general_title" contenteditable="true">
							请在这里输入日志标题
						</div>
						<div class="edit_general_content" contenteditable="true"></div>
					</div>
					<div class="conetn_daliy_bottom"></div>
				</div>
				<div class="mould_daily_footer">
					<button class="edit_report" style="background:#5caae6;color:#FFFFFF;width:85px;height:25px;border:1px solid #5caae6;border-radius:2px;">保存</button>
					<button class="esc" style="color:#878773;height:25px;width:55px;">取消</button>
				</div>
			</div>
		</div>
	</body>
	<script>
		$(function() {
			var i = 0;
			$("#title,#dsc1,#dsc2").mouseenter(function() {
				$(this).css("border", "1px dashed #a8a8a8");
			}).mouseleave(function() {
				$("#title,#dsc1,#dsc2").css("border", "none");
			});
			//日志主页面历史记录
			$('.report').unbind('click').click(function() {
				var title = $(".general_title").text();
				var now = new Date();
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				var day = now.getDate();
				var h = now.getHours();
				var nowdate = year + "年" + month + "月" + day + "日" + h + "点";
				if (title != "") {
					/*i ++ ;*/
					/*var logo = "deltet"+i;*/
					var dom = "";
					dom += '<div class="history_daily_dsc">' +
						'<div class="history_daily_dscContent">' + title + '</div>' +
						'<ul class="history_daily_style">' +
						'<li class="editor" onclick="editFunction()">编辑</li>' +
						'<li class="look">查看&nbsp;</li>' +
						'<li class="deltet" onclick="dltFunction()">删除&nbsp;</li>' +
						'<li>' + nowdate + '&nbsp;&nbsp;&nbsp;</li>' +
						'</ul>' +
						'</div>'
					$('.history_daily').append(dom);
					$('.general_title').empty();
					var titleDemo = document.getElementsByClassName('general_title').innerHTML = '请在这里输入日志标题';
					$('.general_title').append(titleDemo);
					alert("发表成功");
					$(".general_daliy").hide(800);
					$(".daily_content").show(800);
					$('.deltet').click(function() {
						$(this).parent(".history_daily_style").parent(".history_daily_dsc").remove();
					});
					$('.editor,.look').click(function() {
						$(".edit_daliy").css("display", "block");
						$(".daily_content").css("display", "none");
					});
				} else {
					alert("您还未输入标题");
				}
			});
			$('.mould_report').unbind('click').click(function() {
				var title = $("#title").text();
				var now = new Date();
				var year = now.getFullYear();
				var month = now.getMonth() + 1;
				var day = now.getDate();
				var h = now.getHours();
				var nowdate = year + "年" + month + "月" + day + "日" + h + "点";
				if (title != "") {
					var dom = "";
					dom += '<div class="history_daily_dsc">' +
						'<div class="history_daily_dscContent">' + title + '<label style="color:red;font-size:12px;">模板日志</label></div>' +
						'<ul class="history_daily_style">' +
						'<li class="editor" onclick="editFunction()">编辑</li>' +
						'<li class="look">查看&nbsp;</li>' +
						'<li class="deltet" onclick="dltFunction()">删除&nbsp;</li>' +
						'<li>' + nowdate + '&nbsp;&nbsp;&nbsp;</li>' +
						'</ul>' +
						'</div>'
					$('.history_daily').append(dom);
					$('#title').empty();
					var titleDemo = document.getElementsByClassName('#title').innerHTML = '致我们终将逝去的青春';
					$('#title').append(titleDemo);
					alert("发表成功");
					$(".mould_daliy").hide(800);
					$(".daily_content").show(800);
					//编辑事件
					$('.deltet').click(function() {
						$(this).parent(".history_daily_style").parent(".history_daily_dsc").remove();
					});
					
				} else {
					alert("您还未输入标题");
				}
			});
			//普通日志
			$('.write_daily').unbind('click').click(function() {
				$('.general_daliy').css("display", "block");
				$('.daily_content').css("display", "none");
			});
			//更换普通日志的信纸
			$('.letter_paper li img').unbind('click').click(function() {
				var dom1 = "";
				dom1 = '<img style="width:100%;" class="bg" src="img/daily_photo/g11.jpg"/>'
				$('.conetn_daliy_center .bg').empty();
				$(".bg").append(dom1);
				$('.conetn_daliy_center').css("background", "#efdcbc");
			});
			//模板日志
			$('.write_mould_daily').unbind('click').click(function() {
				$('.mould_daliy').css("display", "block");
				$('.daily_content').css("display", "none");
			});
			$('.esc').unbind('click').click(function() {
				$('.mould_daliy').css("display", "none");
				$('.general_daliy').css("display", "none");
				$('.edit_daliy ').css("display", "none");
				$('.daily_content').css("display", "block");
			});
			//聚焦事件
			$("#personal_perception1").focus(function() {
				$('#personal_perception1 label').hide();
			});
			$("#personal_perception1").blur(function() {
				$('#personal_perception1 label').show();
			});
			$("#personal_perception2").focus(function() {
				$('#personal_perception2 label').hide();
			});
			$("#personal_perception2").blur(function() {
				$('#personal_perception2 label').show();
			});
			$("#personal_perception3").focus(function() {
				$('#personal_perception3 label').hide();
			});
			$("#personal_perception3").blur(function() {
				$('#personal_perception3 label').show();
			});
			$("#esc").click(function(){
				window.location="../spaceperson/page1.jsp";
			});
		});
	</script> 

</html>